<template>
    <div class="punish-container">
        <el-row :gutter="20">
            <el-col :span="0" :xs="24">
                <!-- <treeIndex :deptOptions="deptOptions" @handleNode="handleNodeClick" :title="'部门信息'"></treeIndex> -->
            </el-col>
            <el-col :span="6" :xs="12" v-for="item in list" :key="item.id">
                <el-card>
                    <el-descriptions class="margin-top"
                        :title="`${item.studentName} ( ${item.createBy} 于 ${item.createTime} 添加)`" :column="2" :size="size"
                        border>
                        <template slot="extra">
                            <el-button @click="handleAddOrUpdate(item)" v-hasPermi="['synthesize:studentAppealApproval:approve']" :disabled="item.represenStatus != 0" type="primary"
                                size="small">申诉</el-button>
                        </template>
                        <el-descriptions-item>
                            <template slot="label">
                                学年
                            </template>
                            {{ item.schoolYear }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                学期
                            </template>
                            {{ item.termName }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                扣除分值
                            </template>
                            {{ item.realScore }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                违纪类型
                            </template>
                            <dict-tag style="display: inline-block;" :options="dict.type.violation_category"
                                :value="item.violationCategory"></dict-tag>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                违纪状态
                            </template>
                            <dict-tag style="display: inline-block;" :options="dict.type.violation_status"
                                :value="item.violationStatus"></dict-tag>
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                申诉状态
                            </template>
                            <dict-tag style="display: inline-block;color:red" :options="dict.type.represen_status"
                                :value="item.represenStatus"></dict-tag>
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                违纪说明
                            </template>
                            {{ item.violationDescribe }}
                        </el-descriptions-item>
                    </el-descriptions>
                </el-card>

                <!-- <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>{{ item.studentName }} ({{ item.createBy }} 于 {{ item.createTime }} 添加)</span>
                        <el-button style="float: right; padding: 3px 0" type="text"
                            @click="handleAddOrUpdate(item)">申诉</el-button>
                    </div>
                    <div class="text item">
                        {{ '学年: ' + item.schoolYear }}
                        <dict-tag style="display: inline-block;" :options="dict.type.school_year"
                            :value="item.schoolYear"></dict-tag>
                    </div>
                    <div class="text item">
                        {{ '学期: ' + item.termName }}
                    </div>
                    <div class="text item">
                        {{ '扣除分值: ' + item.realScore }}
                    </div>
                    <div class="text item">
                        违纪类型:
                        <dict-tag style="display: inline-block;" :options="dict.type.violation_category"
                            :value="item.violationCategory"></dict-tag>
                    </div>
                    <div class="text item">
                        违纪状态:
                        <dict-tag style="display: inline-block;" :options="dict.type.violation_status"
                            :value="item.violationStatus"></dict-tag>
                    </div>
                    <div class="text item">
                        申诉状态:
                        <dict-tag style="display: inline-block;color:red" :options="dict.type.represen_status"
                            :value="item.represenStatus"></dict-tag>
                    </div>
                    <div class="text item">
                        {{ '违纪说明: ' + item.violationDescribe }}
                    </div>
                </el-card> -->

                <!-- <el-table v-loading="listLoading" :height="height" :data="list" :element-loading-text="elementLoadingText"
                    @selection-change="setSelectRows">
                    <el-table-column show-overflow-tooltip type="selection"></el-table-column>
                    <el-table-column show-overflow-tooltip prop="studentName" fixed="left" width="70" label="学生姓名" />
                    <el-table-column show-overflow-tooltip prop="schoolYear" width="120" label="学年" />
                    <el-table-column show-overflow-tooltip prop="termName" width="60" label="学期" />
                    <el-table-column show-overflow-tooltip prop="college" width="350" label="院系" />
                    <el-table-column show-overflow-tooltip prop="specialityName" width="120" label="专业名" />
                    <el-table-column show-overflow-tooltip prop="className" width="180" label="班级名称" />
                    <el-table-column show-overflow-tooltip prop="counsellorName" width="100" label="辅导员姓名" />
                    <el-table-column show-overflow-tooltip prop="violationCategory" width="100" label="违纪类型">
                        <template slot-scope="scope">
                            <dict-tag :options="dict.type.violation_category"
                                :value="scope.row.violationCategory"></dict-tag>
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip prop="realScore" width="70" label="扣除分值" />
                    <el-table-column show-overflow-tooltip prop="violationStatus" width="80" label="违纪状态">
                        <template slot-scope="scope">
                            <dict-tag :options="dict.type.violation_status" :value="scope.row.violationStatus"></dict-tag>
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip fixed="right" width="200" prop="violationDescribe"
                        label="处分说明" />
                    <el-table-column show-overflow-tooltip fixed="right" label="操作" width="100">
                        <template v-slot="scope">
                            <el-button type="text" @click="handleAddOrUpdate(scope.row)">编辑
                            </el-button>
                            <el-button type="text" @click="tableDelete(scope.row)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination style="float: right;margin-top: 10px;" :background="background"
                    :current-page="queryForm.pageNo" :page-size="queryForm.pageSize" :layout="layout" :total="total"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination> -->
            </el-col>
        </el-row>
        <add-or-edit v-if="addOrUpdateVisiable" ref="addOrUpdate" @refreshDataList="onReset">
        </add-or-edit>
    </div>
</template>
  
<script>

import { getList, delData } from "@/api/assessmentCenter/punish";

import treeIndex from "@/components/tree/index.vue";
import { deptTreeSelect } from "@/api/system/user";
import searchForm from "../../../components/Search/searchForm.vue";
import AddOrEdit from "./addoredit.vue"

export default {
    name: "Activity",
    data() {
        return {
            list: null,
            listLoading: true,
            layout: "total, sizes, prev, pager, next, jumper",
            total: 0,
            background: true,
            height: 500,
            selectRows: "",
            deptOptions: [],
            elementLoadingText: "正在加载...",
            queryForm: {
                pageNo: 1,
                pageSize: 10,
                activityId: "",
            },


            formOptions: [
                {
                    label: "学号",
                    prop: "studentNo",
                    element: "el-input",
                    placeholder: "请输入学号",
                },
                {
                    label: "姓名",
                    prop: "studentname",
                    element: "el-input",
                    placeholder: "请输入姓名",
                },
                {
                    label: "所在班级",
                    prop: "className",
                    element: "el-input",
                    placeholder: "请输入班级",
                },
            ],
            showSearch: true,
            addOrUpdateVisiable: false,
        };
    },
    dicts: ["violation_category", "violation_type", "violation_status", "represen_status"],
    components: {
        treeIndex,
        searchForm,
        AddOrEdit
    },
    created() {
        this.fetchData();
        this.department()
        // this.height = this.$baseTableHeight(1);
    },
    methods: {
        setSelectRows(val) {
            this.selectRows = val;
        },
        editList(row) {
        },
        handleDelete() {
            if (this.selectRows.length > 0) {
                const ids = this.selectRows.map(item => item.id).join();
                this.$baseConfirm(
                    "你确定要删除选中项吗",
                    null,
                    () => {
                        alert(ids);
                    },
                    () => {
                        alert("点击了取消");
                    },
                );
            } else {
                this.$baseMessage("未选中任何行", "error");
                return false;
            }
        },
        tableDelete(row) {
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                delData(row.id).then(res => {
                    if (res.code == 200) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }
                    this.fetchData();
                })

            }).catch(() => {

            });
        },
        handleSizeChange(val) {
            this.queryForm.pageSize = val;
            this.fetchData();
        },
        handleCurrentChange(val) {
            this.queryForm.pageNo = val;
            this.fetchData();
        },
        queryData() {
            this.queryForm.pageNo = 1;
            this.fetchData();
        },
        async fetchData() {
            this.listLoading = true;
            const { rows, total } = await getList(this.queryForm);
            this.list = rows;
            this.total = total;
            setTimeout(() => {
                this.listLoading = false;
            }, 300);
        },
        // 获取部门信息
        async department() {
            await deptTreeSelect().then(res => {
                this.deptOptions = res.data;
            });
        },
        handleNodeClick(data) {
            this.form.college = data.id
            this.queryData()
        },

        // 获取搜索表单提交的数据
        onSearch(val) {
            // 查询条件和分页数据合并
            const arr = Object.assign(this.queryForm, val);
            this.queryForm.pageNum = 1;
            this.fetchData();
        },
        // 重置
        onReset(data) {
            this.queryForm.pageNum = 1;
            const arr = Object.assign(this.queryForm, data);
            Object.assign(this.queryForm, this.$options.data().queryForm);
            // this.addOrUpdateVisiable = false
            this.fetchData();
        },

        // 新增、修改弹窗
        handleAddOrUpdate(data) {
            /* */
            this.addOrUpdateVisiable = true;
            this.$nextTick(() => {
                this.$refs.addOrUpdate.init(data);
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.punish-container {
    width: 100%;
    height: 100%;
    padding: 15px;
}
</style>
  